{extend name="layout/layout" /}
{block name="content"}
<link href="__STATIC__/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
<style>
    .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td{
        line-height: 50px;
        text-align: center;
    }
</style>

<div class="row js-check-wrap">
    <div class="col-lg-12">
        <div class="portlet light">
            <div class="box-header">
                <div class="row">
                    <div class="col-md-10">
                        督办业务：{if $info.typeId == 1}【内部工作】{else/}【信访工作】{/if}{$info.title}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创建人：{$info.p_name}<br/>完成时间：{$info.complete_time}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;紧急程度：{if $info.urgency_degree==1}一般{elseif $info.urgency_degree==2}紧急{else/}加急{/if}<br/>
                        工作要求：{$info.content}
                    </div>
                    <div class="col-md-2">
                        <div class="pull-right">
                            {if $info.schedule!=3}
                                {if $showinsert}
                                <button class="btn blue btn-circle addMember-btn"><i class="fa fa-plus"></i> 新增办理</button>
                                {/if}
                            {else/}
                            <button type="button" class="btn btn-success">督办已完成</button>
                            {/if}

                        </div>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <form class="js-ajax-form" method="post">
                    <div class="">
                        <table id="data-table" class="table table-bordered table-hover dataTable">
                            <thead>
                            <th>执行人</th>
                            <th>办理日期</th>
                            <th>完成情况</th>
                            <th>完成内容</th>
                            <th>操作</th>

                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr role="row" class="odd">
                                <td>{$vo.p_name}</td>
                                <td>{$vo.huibao_time}</td>
                                <td>{if $vo.s_speed==2}进行中{else/}已完成{/if}</td>
                                <td class="sorting_1">{$vo.content}</td>
                                <td>
                                    {if $vo.showedit}
                                    <button type="button" data-actionid="{$vo.id}" data-sspeed="{$vo.s_speed}" data-content="{$vo.content}" class="btn btn-success editMember-btn">编辑</button>
                                    <button type="button" data-actionid="{$vo.id}" data-sspeed="{$vo.s_speed}" class="btn btn-danger delete-btn">删除</button>
                                    {/if}
                                    <button type="button" data-person="{$vo.p_name}" data-content="{$vo.content}" data-sspeed="{$vo.s_speed}" data-time="{$vo.huibao_time}" class="btn btn-success detailMember-btn">详情</button>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 新增 模态框 -->
<div class="modal fade" id="view-modal" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:800px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">新增办理</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light" style="margin-bottom: 0;">
                            <div class="portlet-body">
                                <form method="post" class="form-horizontal" name="ajaxForm">
                                    <div class="">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        完成情况
                                                        <span class="required">*</span>
                                                    </label>
                                                    <div class="col-md-9">
                                                        <div class="form-inline">
                                                            <select class="form-control" name="speed" >
                                                                <option value="2">处理中</option>
                                                                <option value="3">已完成</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        完成内容
                                                        <span class="required">*</span>
                                                    </label>
                                                    <div class="col-md-9">
                                                        <textarea class="form-control" id="textarea_num" cols="80" rows="5" name="content" placeholder="请输入完成内容"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="supervisionId" value="{$info.id}">
                                    <input type="hidden" name="userId" value="{$loginId}">
                                    <div class="modal-footer">
                                        <button type="button" class="btn blue saveSpeed-btn"> 确定 </button>
                                        <button type="button" class="btn default" data-dismiss="modal"> 关闭 </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 编辑 模态框 -->
<div class="modal fade" id="view-modal01" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:800px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">编辑办理</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light" style="margin-bottom: 0;">
                            <div class="portlet-body">
                                <form method="post" class="form-horizontal" name="ajaxForm">
                                    <div class="">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        完成情况
                                                        <span class="required">*</span>
                                                    </label>
                                                    <div class="col-md-9">
                                                        <div class="form-inline">
                                                            <select class="form-control" name="speed" >
                                                                <option value="2" id="speed01">处理中</option>
                                                                <option value="3" id="speed02">已完成</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        完成内容
                                                        <span class="required">*</span>
                                                    </label>
                                                    <div class="col-md-9">
                                                        <textarea class="form-control" id="textarea_num01" cols="80" rows="5" name="content" placeholder="请输入完成内容"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="supervisionId" value="{$info.id}">
                                    <input type="hidden" name="userId" value="{$loginId}">
                                    <input type="hidden" name="id" value="">
                                    <div class="modal-footer">
                                        <button type="button" class="btn blue editSpeed-btn"> 确定 </button>
                                        <button type="button" class="btn default" data-dismiss="modal"> 关闭 </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 详情 模态框 -->
<div class="modal fade" id="view-modal02" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:800px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">办理详情</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light" style="margin-bottom: 0;">
                            <div class="portlet-body">
                                <form method="post" class="form-horizontal" name="ajaxForm">
                                    <div class="">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        执行人：
                                                    </label>
                                                    <div class="control-label col-md-4">
                                                        <span id="person"></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        办理日期：
                                                    </label>
                                                    <div class="control-label col-md-4">
                                                        <span id="huibao_time"></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        完成情况：
                                                    </label>
                                                    <div class="control-label col-md-4">
                                                        <span id="handeling"></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        完成内容：
                                                    </label>
                                                    <div class="control-label col-md-4">
                                                        <span id="decontent"></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn default" data-dismiss="modal"> 关闭 </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<input type="hidden" class="datalist_url" value="{:url('admin/Supervision/handle')}">
<input type="hidden" class="edit_url" value="{:url('admin/Supervision/edit')}">
<input type="hidden" class="delete_url" value="{:url('admin/Supervision/delete')}">
<input type="hidden" class="addhandle_url" value="{:url('admin/Supervision/addHandle')}">

{/block}

{block name="pagescript"}
<script src="__STATIC__/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="__STATIC__/admin/pages/js/handle.js?v={:time()}" type="text/javascript"></script>
<script>
    (function($) {
        $.fn.limitTextarea = function(opts) {
            var defaults = {
                maxNumber: 150, //允许输入的最大字数
                position: 'top', //提示文字的位置，top：文本框上方，bottom：文本框下方
                onOk: function() {}, //输入后，字数未超出时调用的函数
                onOver: function() {} //输入后，字数超出时调用的函数
            }
            var option = $.extend(defaults, opts);
            this.each(function() {
                var _this = $(this);
                if(opts.type == 'add'){
                    var numid = "infoadd"
                }else{
                    var numid = "infoedit"
                }
                var info = '<div id='+numid+'>还可以输入<b>' + (option.maxNumber - _this.val().length) + '</b>个字</div>';
                var fn = function() {
                    var $info = $('#'+numid);
                    var extraNumber = option.maxNumber - _this.val().length;

                    if (extraNumber >= 0) {
                        $info.html('还可以输入<b>' + extraNumber + '</b>个字');
                        option.onOk();
                    } else {
                        $info.html('已经超出<b style="color:red;">' + (-extraNumber) + '</b>个字');
                        option.onOver();
                    }
                };
                switch (option.position) {
                    case 'top':
                        _this.before(info);
                        break;
                    case 'bottom':
                    default:
                        _this.after(info);
                }
                //绑定输入事件监听器
                if (window.addEventListener) { //先执行W3C
                    _this.get(0).addEventListener("input", fn, false);
                } else {
                    _this.get(0).attachEvent("onpropertychange", fn);
                }
                if (window.VBArray && window.addEventListener) { //IE9
                    _this.get(0).attachEvent("onkeydown", function() {
                        var key = window.event.keyCode;
                        (key == 8 || key == 46) && fn(); //处理回退与删除
                    });
                    _this.get(0).attachEvent("oncut", fn); //处理粘贴
                }
            });
        }
    })(jQuery)
    //插件调用；
    $(function() {
        $('#textarea_num').limitTextarea({
            maxNumber: 150, //最大字数
            position: 'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方
            type:'add',
            onOk: function() {
                $('#textarea_num').css('background-color', 'white');
                $(".saveSpeed-btn").removeAttr("disabled");
            }, //输入后，字数未超出时调用的函数
            onOver: function() {
                $('#textarea_num').css('background-color', 'lightpink');
                $(".saveSpeed-btn").attr("disabled","disabled");
            } //输入后，字数超出时调用的函数，这里把文本区域的背景变为粉红色
        });

    });
</script>
{/block}